<template>
	<div class="top" style="display: flex; align-items: center;">
    <div @click="xiazai" style="color: #005aff; margin-right: 20px; font-size: 14px; cursor: pointer;">下载说明文档</div>

    <div style="background: rgb(255, 255, 255); border-radius: 25px; height: 50px; padding: 6px 12px 6px 6px; margin-right: 30px;">
      <div class="flexbc">
        <div class="flex">
          <div style="margin-right: 5px;"><img  src="../../static/img/tongzhi.png" style=" width: 38px; height: 38px; border-radius: 19px;"/></div>
          <div>
            <div style=" font-size: 14px;color: #020C1D;">消息通知</div>
            <!-- <div style=" font-size: 12px;color:#787D85;">未读:<span style="color: #FF0000;  margin: 0 10px;">{{ count }}</span></div> -->
          </div>
        </div>
        <div @click="joinchatlist2" class="t_join_chatlist">进入</div>
      </div>
    </div>

    <div style="background: rgb(255, 255, 255); border-radius: 25px; height: 50px; padding: 6px 12px 6px 6px; margin-right: 30px;">
      <div class="flexbc">
        <div class="flex">
          <div style="margin-right: 5px;"><img  src="../../static/img/chat.png" style=" width: 38px; height: 38px; border-radius: 19px;"/></div>
          <div>
            <div style=" font-size: 14px;color: #020C1D;">客服平台</div>
            <div style=" font-size: 12px;color:#787D85;">待回复:<span style="color: #FF0000;">{{ count }}</span></div>
          </div>
        </div>
        <div @click="joinchatlist" class="t_join_chatlist">进入</div>
      </div>
    </div>

    <div style="background: rgb(255, 255, 255); border-radius: 25px; height: 50px; padding: 6px 12px 6px 6px; width: 180px;">
      <div class="flexbc">

        <div class="flex">
          <div style="margin-right: 5px;"><img  src="../../static/img/toux.png" style=" width: 38px; height: 38px; border-radius: 19px;"/></div>
          <div>
            <div style=" font-size: 14px;color: rgb(120, 125, 133);">{{user.name}}</div>
            <div style=" font-size: 12px;color: rgb(120, 125, 133);">管理员</div>
          </div>
        </div>
        <div>
          <el-dropdown @command="handleCommand" trigger="click" >
            <span class="el-dropdown-link">
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>

    <el-dialog  title="系统配置提醒" :visible.sync="weipeizhi" center :close-on-click-modal="false" :modal-append-to-body="false" :close-on-press-escape="false" :show-close="false" width="600px">
      <div class="flexcc">您还未完成系统配置，系统暂不可用，请先前往配置</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="go('/xitongpeizhi')">前往配置</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="log2" :close-on-click-modal="false" :modal-append-to-body="false" :close-on-press-escape="false" width="800px" class="tongzhilog">
      <div class="tongzhibeijing">
        <div class="flexc" style="padding: 80px 20px 0;">
          <div><img src="../../static/img/tongzhilogo.png"></div>
          <div>
            <div style="color: #fff; font-size: 20px; margin-left: 20px;">小螺号版本更新！</div>
            <div style="color: #fff; font-size: 16px; margin-left: 20px; margin-top: 5px;" class="flexc">
              <div>{{now.version}}</div>
              <div style="margin-left: 10px; font-size: 14px; position: relative; top: 2px;">上线时间：{{now.release_at}}</div>
            </div>
          </div>
        </div>
        <div style="padding: 0px 20px 0; height: 150px; margin-top: 80px; overflow: auto;">
          <div style="font-size: 16px; margin-bottom: 10px;">{{now.title}}</div>
          <div style="margin-bottom: 20px;" v-html="now.content"></div>
        </div>
        <div style="position: absolute; left: 40px; bottom: 20px; width: 720px;" class="flexbc">
          <div v-if="!now.annex">无附件</div>
          <div @click="xiazai2(now.annex)" style="color: rgb(0, 90, 255); cursor: pointer; margin-right: 20px;"  v-if="now.annex">附件下载</div>
          <div class="flexc">
            <div style="margin-right: 20px;">1/{{tongzhi.length}}</div>
            <el-button type="primary" @click="yidu(1)">已读</el-button>
            <el-button type="primary" v-if="tongzhi.length > 1" @click="yidu(2)">全部已读</el-button>
          </div>
        </div>
        <!-- <div style="margin-bottom: 20px;"><span style="font-weight: bold; margin-right: 10px;">通知标题:</span>{{now.title}}</div>
        <div style="margin-bottom: 20px;"><span style="font-weight: bold; margin-right: 10px;">版本号:</span>{{now.version}}</div>
        <div style="margin-bottom: 20px;"><span style="font-weight: bold; margin-right: 10px;">上线时间:</span>{{now.release_at}}</div>
        <div style="margin-bottom: 20px;" v-html="now.content"></div>
        <div style="margin-bottom: 20px;" class="flexc"  v-if="now.annex"><span style="font-weight: bold; margin-right: 10px;">附件:</span>
          <div @click="xiazai2(now.annex)" style="color: rgb(0, 90, 255); cursor: pointer; margin-right: 20px;">下载</div>
        </div> -->
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="log2 = false">已读</el-button>
        <el-button type="primary" @click="log2 = false">下一条</el-button>
        <el-button type="primary" @click="log2 = false">全部已读</el-button>
      </span> -->
    </el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'top',
		data() {
			return {
        user:"",
        count:0,
        icp:"",
        weipeizhi:false,
        log2:false,
        tongzhi:"",
        now:""
			}
		},
		created() {

      //获取客服数
      this.getcountkf()
      this.icp = localStorage.getItem('icp')
      this.getpeizhi()
      this.gettongzhi()

		},
		mounted() {
      if(localStorage.getItem('user')){
        this.user = JSON.parse(localStorage.getItem('user'))
      }
		},
		methods: {
      yidu:function(val){
        if(val == 1){
          axios.post('/own/sys/version/read',{id:this.now.id}).then((response)=>{
          	if (response.data.msg.code == 0) {
              this.gettongzhi()
          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          })
        }
        if(val == 2){
          axios.get('/own/sys/version/read/all').then((response)=>{
          	if (response.data.msg.code == 0) {
              this.log2 = false
          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          })
        }
      },
      gettongzhi:function(){
        axios.get('/own/sys/version/list?status=1&pageSize=100').then((response)=>{
        	if (response.data.msg.code == 0) {
            this.tongzhi = response.data.data.data
            if(this.tongzhi.length > 0 && JSON.parse(localStorage.getItem('user')).id != 10652){
              this.now = this.tongzhi[0]
              this.log2 = true
            }else{
              this.log2 = false
            }
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      xiazai2:function(url){
        window.location.href = url  + '?attname='
      },
      xiazai:function(){
        const a = document.createElement('a');
        a.setAttribute('download', '小螺号说明文档.zip');
        a.setAttribute('href', window.location.origin +  '/hou/static/img/wendang.zip');
        a.click();
      },
      handleCommand:function(e){
        if(e == 'a'){
          axios.post('/own/auth/logout').then((response)=>{
          	if (response.data.msg.code == 0) {
          		this.$router.push('/login')
          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          })
        }
      },
      joinchatlist2:function(){
        this.$router.push({path:'/tongzhi/tongzhixitong'})
      },
      joinchatlist(){
        this.$router.push({path:'/kefu/kfset'})
      },
      //获取客服数
      getcountkf(){
        axios.get('/own/customer/service/count').then((response)=>{
          	if (response.data.msg.code == 0) {
              // console.log('获取客服数')
              console.log(response.data.data.count)
          		this.count = response.data.data.count
          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          })
      },
      getpeizhi:function(){

        axios.get('/own/system/get').then((response)=>{
        	if (response.data.msg.code == 0) {
            if(!response.data.data.shop_name || !response.data.data.gth_id){
              if(this.$router.history.current.fullPath != '/xitongpeizhi'){
                this.weipeizhi = true
              }
            }
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })

      },
		}
	}
</script>


<style scoped lang="less">
  /deep/ .el-radio{ display: block; margin-bottom: 20px;}
  .t_join_chatlist{
    background-color: #E0F8E2;
    font-size: 13px;
    color: #0E9D0E;
    width: 75px;
    text-align: center;
    line-height: 30px;
    border-radius: 15px;
    margin-left: 10px;
    cursor: pointer;
  }
  .tongzhilog{
    /deep/ .el-dialog{ width: 800px; padding: 0 !important; background: transparent !important; box-shadow: 0 0px 0px rgba(0,0,0,.3);
      .el-dialog__header{ display: none;}
      .el-dialog__body{ padding: 0 !important; background: transparent !important;}
    }
    .tongzhibeijing{
      width: 800px; height: 450px; padding: 0 20px; position: relative; background: url(../../static/img/tongzhibeijing.png) no-repeat;
    }
  }
</style>
